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METHOD OF NAVIGATING IN APPLICATION VIEWS, ELECTRONIC DE- 
VICE, GRAPHICAL USER INTERFACE AND COMPUTER PROGRAM 
PRODUCT 

BACKGROUND OF THE INVENTION: 

5 Field of the invention: 

The invention relates to a method of navigating in application views 
of an electronic device, to an electronic device for navigating in application 
views, to a graphical user interface for navigating in application views shown 
on a display of an electronic device, and to a computer program product. 

10 Description of the Related Art: 

The significance of different displays, for example, touch screens, is 
becoming more and more important in portable electronic devices. The brows- 
ing capabilities of these devices are improving. Portable devices are more and 
more used when navigating in different application views shown in the devices, 

15 for example. Browsing on the Internet is one example of where the usability of 
a display is critical. However, the sizes of different portable electronic devices 
are limited, and therefore also the sizes of the displays used in such devices 
are usually far from corresponding displays used in personal computers, for 
example. Due to the limited sizes of the displays, the users need to scroll a lot 

20 when navigating on the Internet, for example. Small display sizes also lead to 
smaller fonts, which in turn leads to using zooming features of the devices. 

The scroll bars used in known systems are often difficult to tap on. 
and eispecially when the display is small. The usability of such scroll bars is 
even poorer in mobile situations, in moving vehicles, for example. The horizon- 

25 tal and vertical scroll bars also cover up some space of the display. Also the 
functions of zooming in and out, for example, are usually quite difficult to use. 
To be able to zoom in to or out of an Internet document, for example, the user 
may have to first choose the appropriate zooming function by using various 
menus and menu bars. 

30 SUMMARY OF THE INVENTION: 

According to an aspect of the invention, there is provided a method 
of navigating in application views of an electronic device, the electronic device 
comprising a display for showing application views and an input device. The 
method comprises displaying an Initial application view on the display, provid- 
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ing a. floatable navigation area displayed at least partly over the application 
views on the display, the floatable navigation area comprising navigation 
blocks for controlling given software functions, detecting a selection of a given 
navigation block indicated by the input device, performing software functions 
6 associated with the selected navigation block once the selection of said navi- 
gation block is detected, and displaying a current application view on the basis 
of the performed software functions. 

According to another aspect of the invention, there is provided an 
electronic device for navigating in application views, the electronic device 

10 comprising a control unit for controlling functions of the electronic device, a 
display for showing application views coupled to the control unit, and an input 
device for giving control commands for navigating, coupled to the control unit. 
The control unit is configured to: display an initial application view on the dis- 
play, provide a floatable navigation area displayed at least partly over the ap- 

15 plication views on the display, the floatable navigation area comprising naviga- 
tion blocks for controlling given software functions, detect a selection of a given 
navigation block indicated by the input device, perform software functions as- 
sociated with the selected navigation block once the selection of said naviga- 
tion block is detected, and display a current application view on the basis of the 

20 performed software functions. 

According to an embodiment of the invention, there is provided a 
graphical user interface for navigating in application views shown on a display 
of an electronic device, the graphical user interface comprising: an initial appli- 
cation view displayed on the display, a floatable navigation area displayed at 

25 least partly over the application view, the floatable navigation area comprising 
navigation blocks for controlling given software functions, and a current appli- 
cation view displayed on the display on the basis of performed software func- 
tions associated with a detected selected navigation block. 

According to another embodiment of the invention, there is provided 

30 a computer program product encoding a computer process for providing navi- 
gating in an application view of an electronic device, the computer process 
comprising: displaying an initial application view on the display, providing a 
floatable navigation area displayed at least partly over the application views on 
the display, the floatable navigation area comprising navigation blocks for con- 

35 trolling given software functions, detecting a selection of a given navigation 
block, performing software functions associated with the selected navigation 
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block once the selection of said navigation block is detected, and displaying a 
current application view on the basis of the performed software functions. 

According to an embodiment of the invention, there is provided an 
electronic device for navigating in application views, the electronic device 
5 comprising controlling means for controlling functions of the electronic device, 
displaying means for showing application views, and input means for giving 
control commands for navigating. The controlling means being further config- 
ured to: display an initial application view on a display, provide a floatable 
navigation area displayed at least partly over the application views on the dis- 

10 play, the floatable navigation area comprising navigation blocks for controlling 
given software functions, detect a selection of a given navigation block indi- 
cated by the input means, perform software functions associated with the se- 
lected navigation block once the selection of said navigation block is detected, 
and display a current application view on the basis of the performed software 

16 functions. 

The embodiments of the invention provide several advantages. 
Navigating in application views is carried out by using a single tool. Also, the 
user can customize the tool. Also, more space is saved in the display of the 
portable electronic device. Further, from the point of view of the user, the in- 
20 vention is quickly understandable and easy to learn and use. 

BRIEF DESCRIPTION OF THE DRAWINGS: 

In the following, the invention will be described in greater detail with 
reference to preferred embodiments and the accompanying drawings, in which 
Figure 1 shows an example of an electronic device; 
25 Figures 2A and 2B illustrate examples of user interfaces of the in- 

vention, and 

Figure 3 shows an example of a method of navigating in application 
views in a user interface of an electronic device. 

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS: 

30 The embodiments of the invention are applicable to electronic de- 

vices, such as a mobile station used as a terminal in telecommunication sys- 
tems comprising one or more base stations and terminals communicating with 
the base stations, for example. The device may be used for short-range com- 
munication implemented with a Bluetooth chip, an infrared or WLAN connec- 

35 tion, for example. The electronic device is, for example, a portable telephone 
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or another device including telecommunication means, such as a portable 
computer, a personal computer, a handheld computer or a smart telephone. 
The portable electronic device may be a PDA (Personal Digital Assistant) de- 
vice including the necessary telecommunication means for establishing a net- 
5 work connection, or a PDA device that can be coupled to a mobile telephone, 
for instance, for a network connection. The portable electronic device may also 
be a computer or PDA device including no telecommunication means. 

Figure 1 shows a block diagram of the structure of an electronic de- 
vice. A control unit 100, typically implemented by means of a micro-processor 

10 and software or separate components, controls the basic functions of the de- 
vice. A user interface of the device comprises an input device 104 and a dis- 
play 102, such as a touch screen implemented by manners known per se. In 
addition, the user interface of the device may include a loudspeaker and a 
keypad part. Depending on the type of the device, there may be different and a 

15 different number of user interface parts. The device of Figure 1 , such as a mo- 
bile station, also includes communication means 108 that implement the func- 
tions of a mobile station and include speech and channel coders, modulators 
and RF parts. The device may also comprise an antenna and a memory 106. 

The functions of the device are controlled by means of the input de- 

20 vice 104, such as a mouse, a hand-held locator operated by moving it on a 
surface. When using a mouse, for example, a sign or a symbol shows the loca- 
tion of a mouse cursor on the display 102 and often also the function running 
in the device, or its state. It is also possible that the display 102 itself is the in- 
put device 104 achieved by means of a touch screen such that the desired 

25 functions are selected by touching the desired objects visible on the display 
102. A touch on the display 102 may be carried out by means of a pen, a sty- 
lus or a finger, for example. The input device 104 can also be achieved by us- 
ing eye tracking means where detection of eye movements is used in interpret- 
ing certain control commands. 

30 The control unit 1 00 controls the functions of the user interface and 

is connected to the display 102 and configured to show different application 
views on the display 102. The control unit 100 receives control commands 
from the input device 104. The input device 104 is configured to give control 
commands for navigating in application views shown on the display 102. The 

35 application views may be views into different web pages from the Internet, 
views from any application programs run in the device or any other application 
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views that may be shown on the display 102. The navigating or browsing the 
application views may include scrolling the application view horizontally or ver- 
tically, zooming in to the application view to get a better view of the details of 
the application view or zooming out from the application view to get a more 
5 general view of the whole application view. 

The navigating function operates such that the desired functions, 
such as scrolling or zooming, are first selected by means of the input device 
104. Then, the control unit 100 interprets the detected selections, performs 
given software functions based on thereon and, as a result of the performed 

10 software functions, displays a given application view on the display 104. 

In an embodiment of the invention, the control unit 100 first displays 
an initial application view on the display 102. The control unit 100 is configured 
to provide a floatable navigation area displayed at least partly over the applica- 
tion view on the display 102. The floatable navigation area comprises naviga- 

15 tion blocks for controlling given software functions. The control unit 100 detects 
a selection of a given navigation block indicated by the input device 104. The 
selection may be detected on the basis of a touch on the display 102, for ex- 
ample. Alternatively, the selection may be detected by means of the input de- 
vice 104, such as a mouse or a pen. 

20 According to an embodiment of the invention, the control unit 100 is 

configured to perform software functions associated with the selected naviga- 
tion block once the selection of said navigation block is detected. Finally, the 
control unit 100 is configured to display a current application view based on the 
performed software functions. 

25 The initial application view may be a partial view into an Internet 

page, and the current application view after a scrolling function may be a view 
into another part of the Internet page, for example. The current application 
view may also be a view into the Internet page after the control unit 100 has 
performed a zooming function. 

30 The control unit 100 continues to detect control commands indicated 

by the input device 102, and to detect selections of given navigation blocks. It 
is possible that the floatable navigation area is displayed automatically partly 
over the application view on the display 102 when a given application program 
displaying the application views is opened. It is also possible that the floatable 

35 navigation area is opened separately by using an icon or a menu function or by 
tap-based activation. 
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Let us next study embodiments of the invention by means of Figures 
2A and 2B. Figures 2A and 2B show displays 104 of an electronic device, such 
as a PDA device. The Figures 2A and 2B illustrate graphical user interfaces in 
an embodiment of the invention. 
5 A display 102 is divided into different areas, each area having spe- 

cific functions. Application views are shown in the largest areas 220A and 
220B, for example. There may be different bars 216, 218 for displaying differ- 
ent information or menus on the display 102. 

In an embodiment, the floatable navigation areas 200, 200A, 200B 

10 are in the form of squares in Figures 2A and 2B. The floatable navigation areas 
200, 200A, 200B may also be of any other shape than that of a square, such 
as a circle, for example. The floatable navigation areas 200, 200A, 200B com- 
prise navigation blocks 202, 204, 206, 208, 210, 212, 214 for controlling given 
software functions. In these examples, the navigation blocks 202 and 208 con- 

15 trol horizontal scrolling of the application view and the navigation blocks 204 
and 212 control vertical scrolling of the application view. The navigation blocks 
206 and 210 control zooming in and zooming out in this example. It is possible 
that tapping a pen down on a given navigation block 202, 204, 208, 212 for 
scrolling results in scrolling to the desired direction by a single predetermined 

20 step. Holding the pen down on the navigation block 202, 204, 208, 212 may 
repeat the functionality. Accordingly, tapping a pen down on a given navigation 
block 206, 210 for zooming results in changing the zoom level by a single pre- 
determined step, and holding the pen down repeats the functionality. 

The number of navigation blocks 202, 204, 206, 208, 210, 212, 214 

25 may be different than in this example. There may also be control functions for 
the navigation blocks 202, 204, 206, 208, 210, 212, 214 other than those in 
these examples. Further, it is possible that there is only one navigation block 
for both horizontal and vertical scrolling, for example. Thus, using one half of 
the navigation block may carry out the horizontal scrolling and using the other 

30 half of the navigation block carries ouf the vertical scrolling. The main point in 
this embodiment is that all the necessary navigation blocks reside in the same 
area, that is, in the floatable navigation area 200, 200A, 200B. 

In an embodiment of the invention, the floatable navigation area 
200, 200A, 200B comprises a control block 214. In Figures 2A and 2B, the 

35 control block 214 is in the middle of the floatable navigation area. The control 
block 214 is for changing the location of the floatable navigation area 200, 
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200A. 200B, for example. The location of the floatable navigation area 200, 
200A, 200B may be changed for example by dragging and dropping the float- 
able navigation area 200, 200A, 200B with the help of the control block 214. 
Tapping on the control block 214 and holding the pen down while dragging 
5 may move the floatable navigation area to a desired location. For example, in 
Figure 28, the location of the floatable navigation area 200A is changed to a 
location of the floatable navigation area 2008. It is also possible that the 
changed location remains in the memory and the floatable control area 200A is 
next displayed in the changed location. 

10 The appearance of the floatable navigation area 200, 200A, 2008 

may be set as desired. In the example of Figure 2A, the navigation blocks 202, 
204, 206, 208, 210, 212, 214 for different functions are marked with individual 
icons, such as arrows up and down, for navigation blocks 212, 204 for vertical 
scrolling, arrows left and right for navigation blocks for horizontal scrolling 202, 

15 208, magnifiers for navigation blocks 206, 210 for zooming in or out, and 
crossed arrows for the control block 214. The navigation blocks 202, 204, 206, 
208, 210, 212, 214 may also be marked with appropriate colors, text, drawings 
or fill effects. It is also possible that no icons are used and only the different 
colours are used to identify different functions of the navigation blocks 202, 

20 204, 206, 208, 210, 212, 214. For example, different function groups, such as 
scrolling, zooming and moving, may have their own colors in addition to icons 
like arrows and magnifiers. 

The floatable navigation area 200, 200A, 2008 may also be set to 
appear in a "ghost mode", meaning for example that all the icons are removed 

25 and only colors are used to indicate different navigation blocks. The whole 
floatable navigation area 200, 200A, 2008 may be semi-transparent, that is, 
the contents below the floatable navigation area 200, 200A, 2008 are visible. 
The level of transparency may also be adjusted. Thus, the floatable navigation 
area 200, 200A, 2008 does not cover so much of the application view shown 

30 on the display 102. It is also possible that no colours, arrows or magnifiers are 
shown such that only some or all outlines of the different navigation blocks 
202, 204. 206, 208, 210. 212, 214 are visible. As an example of the "ghost 
mode". Figure 28 shows the floatable navigation area 2008 in a "ghost mode". 
The application view 2208 can be seen through the floatable navigation area 

35 2008. Further, there are only outlines of the navigation blocks 202. 204, 206, 
208, 210, 212, 214 marking the locations of the navigation blocks of the float- 
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able navigation area 200B. Of course, it is possible that the "ghost nriode" is 
used with different icons, such as arrows, magnifiers and/or colors. Thus, the 
application view under the floatable navigation area 200, 200A. 200B is also 
seen through the semi-transparent floatable navigation area. 
5 In Figure 2A, the graphical user interface of the embodiment com- 

prises an initial application view 220A that is displayed on the display 104. The 
application view 220A is, for example, a view into a web page on the Internet. 
The floatable navigation area 200 is displayed at least partly over the initial 
application view 220A. The location and size of the floatable navigation area 

10 200 may be determined by using the user interface of the device, for example. 
It is possible that each time an application view is opened, the floatable naviga- 
tion area 200 is displayed in a given location, for example, in the upper right 
corner of the display 104. The location may at any time be changed by using 
the control block 214. Pressing or touching the control block 214 with a pen, for 

15 example, and moving the pen along the surface of the display 104 may result 
in changing the location of the floatable navigation area 200. The size of the 
floatable navigation area 200 may also be set appropriately, for example, ac- 
cording to the needs of individual users of the device. The user may choose 
between a large and a small floatable navigation area 200, 200A, 200B, for 

20 example. As the use of the method becomes familiar, the user may wish to 
make the floatable navigation area 200, 200A, 2008 smaller and less visible. 
Thus, the smaller size and a "ghost mode" may be selected to make the float- 
able navigation area 200, 200A, 2008 quite invisible, yet still usable. 

In the example of Figure 2A, the navigation block 204 is next se- 

25 lected. The user, for example, wishes to navigate the view to the web page by 
scrolling the page downwards. Thus, the navigation block 204 that controls the 
scrolling down function is selected. The selection of the navigation block 204 
may be performed by using any suitable input device. Once the selection of the 
navigation block 204 has been detected, a current application view 220B illus- 

30 trated in Figure 28 is displayed. The amount of scrolling down may depend on 
how long a pen is pressed on the navigation block 204, for example. If only a 
single touch is detected on the navigation block 204, only a predetermined 
step is scrolled down. Further, if the pen is continuously held down on the 
navigation block 204, the scrolling down continues as long as the pen stays on 

35 the navigation block 204. It is also possible that pressing the pen on the navi- 
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gation block 204 for a predetermined period of time results in an increase in 
the speed of scrolling down. 

Accordingly, if the user wishes to zoom the application views shown 
on the display 102, navigation blocks 206, 210 for zooming are selected. Once 
5 the selection of the navigation block 206, 210 for zooming has been detected, 
a current application view zoomed according to the detected selected naviga- 
tion block is shown. If a pen is continuously held down on the navigation block 
206, 210 for zooming, the zooming function continues. It is also possible that 
pressing the pen on the navigation block 206, 210 for a given time may result 

10 in an increase in the speed of zooming accordingly. In an embodiment, it is 
also possible that the amount of pressure detected at a site of a navigation 
block 202, 204, 206, 208, 210, 212 defines the speed of scrolling or the level of 
zooming. The amount of pressure may be detected based on a touch screen 
or a pressure sensitive pen used with the user interface of an embodiment, for 

15 example. 

In an embodiment, also other control functions may be quickly se- 
lected by using the floatable navigation area 200, 200A, 200B. For example, 
pressing a secondary mouse button on a given navigation block 202, 204, 206, 
208, 210, 212, 214 may result in opening a selection list or a menu where dif- 

20 ferent control functions may be selected. If a touch screen or a pressure sensi- 
tive pen is used, a pen down on the control block 214 and holding the pen 
without moving may activate a given control function, such as opening of the 
selection list. Different topics on the selection lists or menus may be related to 
the floating navigation area 200, 200A, 200B, to the navigation blocks 202, 

25 204, 206, 208, 210, 212 , 214, to browsing functions and different settings. All 
the settings and functions that are needed are easily reachable by using such 
selection lists. Examples of the control functions that may be included in the 
selection lists include toggling between a full screen and a normal view, hiding 
the floatable navigation area 200, 200A. 200B, selecting the ghost mode, set- 

30 ting the size and appearance of the floatable navigation area 200, 200A, 200B, 
and so on. Selecting a given topic from the selection list results in performing 
the function in question and then closing the selection list, for example. Also, 
tapping outside the selection list may cancel the action and close the selection 
list. 

35 Figure 3 shows an example of a method of navigating in application 

views in a user interface of an electronic device. 
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The method starts is 300. In 302, an initial application view is dis- 
played on the display. In 304, a floatable navigation area is displayed on the 
display at least partly over the application view. The floatable navigation area 
may be displayed automatically when the application view is shown on the dis- 
5 play, for example. It is also possible that the floatable navigation area is first 
shown as an icon on the display, is activated from a menu or on the basis of a 
tap based activation on screen, and is selected when needed. In 306, if a se- 
lection of a navigation block is detected, 308 is entered. If no selections of 
navigation blocks are detected, the initial application view remains with the 

10 floatable navigation area covering a part of the application view. 

In 308, software functions associated with the selected navigation 
block are performed based on the detection of the selected navigation block. In 
310, a current application view is displayed based on the performed software 
functions. The method may continue by repeating the steps from 304 to 310 

15 until the application is closed or the device is shut down. The method ends in 
312. 

Even though the invention has been described above with reference 
to an example according to the accompanying drawings, it is clear that the in- 
vention is not restricted thereto but can be modified in several ways within the 
20 scope of the appended claims. 
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